<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <h2 class="sub-header">新增联系人</h2>
    <form #f="ngForm" (ngSubmit)="addHandle(f)">
        <div class="form-group">
            <label for="name">姓名</label>
            <!-- #name="ngModel"声明模板变量name,值为当前表单控件的value -->
            <input name="name" #name="ngModel" required minlength="2" [(ngModel)]="f.name" type="text"
                class="form-control" id="name" placeholder="姓名">

            <!-- 表单验证 -->
            <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
                <div *ngIf="name.errors.required">
                    <b>*</b> 联系人名称为必填项
                </div>
                <div *ngIf="name.errors.minlength">
                    <b>*</b> 联系人名称不能小于2个字符
                </div>
            </div>


        </div>
        <div class="form-group">
            <label for="email">邮箱</label>
            <!-- 声明模板变量#email="ngModel",值为当前表单控件的value -->
            <!--email=""true"开启邮箱格式校验-->
            <input #email="ngModel" required name="email" [(ngModel)]="f.email" type="email" class="form-control"
                id="email" placeholder="邮箱" email="true">
            <!--表单验证-->
            <div *ngIf="email.invalid&&(email.dirty||email.touched)" class="alert alert-danger">
                <div *ngIf="email.errors.required">
                    <b>* </b> 联系人邮箱为必填项
                </div>
                <div *ngIf="email.errors.email">
                    <b>* </b> 邮箱格式不正确
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="tel">电话</label>
            <input maxlength="11" name="tel" #tel="ngModel" [(ngModel)]="f.tel" required
                type="tel" class="form-control" id="tel" placeholder="电话" minlength="11" maxlength="11">
            <!--表单验证-->
            <div *ngIf="tel.invalid&&(tel.dirty||tel.touched)" class="alert alert-danger">
                <div *ngIf="tel.errors.required">
                    <b>* </b> 联系人电话为必填项
                </div>
                <div *ngIf="tel.errors.minlength">
                    <b>* </b> 手机号码长度最小长度为11位
                </div>
                <div *ngIf="tel.errors.minlength">
                    <b>* </b> 手机号码长度最大长度为11位
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="tag">标签</label>
            <select name="tagId" #tagId="ngModel" [(ngModel)]="f.tagId" id="tag" class="form-control" required>
                <!-- <option *ngFor="let item of tagList" [value]="item.id">{{item.name}}</option> -->
                <ng-template ngFor [ngForOf]="tagList" let-item>
                    <option *ngIf="item.id==1;else elseOption" [value]="item.id" selected="selected">{{item.name}}
                    </option>
                    <ng-template #elseOption>
                        <option [value]="item.id">{{item.name}}</option>
                    </ng-template>
                </ng-template>
            </select>
            <div *ngIf="tagId.invalid&&(tagId.dirty||tagId.touched)">
                <div *ngIf="">
                    <b>* </b>标签为必选项
                </div>
            </div>
        </div>
        <button type="submit" [disabled]="!f.valid" class="btn btn-info">创建</button>
    </form>
</div>